<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
    <script type="module" src="jumps.js"></script>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">
        <h2>粒子效果</h2>

        <!---->
        <p>
            <pre>显示粒子效果场景。

粒子可以在2D或3D中运动，取决于<property query="perspectivedepth">透视深度</property>属性。
</pre>
        </p>
        <h4>属性</h4>
        <hr>
        <!---->
        <dl>
            <dt>通用元素属性</dt>
            <dd>
                <p>参见 <a href="local://customization_general">通用属性</a>。</p>
            </dd>

            <hr>

            <dt id="color">颜色</dt>
            <dd>
                <p>粒子的基础颜色，颜色还受到<property query="colorfrom">起始颜色</property>和<property query="colorto">结束颜色</property>
                    的影响。</p>
            </dd>
            <dt id="countlimit">数量限制</dt>
            <dd>
                <p>粒子在任何给定时间内可以存在的最大数量限制。</p>
            </dd>
            <dt id="mirrorx">水平镜像</dt>
            <dd>
                <p>将所有粒子水平镜像。</p>
            </dd>
            <dt id="mirrory">垂直镜像</dt>
            <dd>
                <p>将所有粒子垂直镜像。</p>
            </dd>
            <dt id="perspectivedepth">透视深度</dt>
            <dd>
                <p>如果设置大于<value query="0">0</value>，粒子将具有3D效果，此值指定3D区域的深度。如果设置为<value query="0">0</value>
                    或更低，粒子将以2D方式呈现，没有深度移动。</p>
            </dd>
            <dt id="perspectivefov">透视视角</dt>
            <dd>
                <p>指定视场角度。用于3D粒子效果。</p>
            </dd>
            <dt id="spawnarea">生成区域</dt>
            <dd>
                <p>指定粒子出现的区域。</p>
                <!--2-->
                <div class="pborder">
                    <h6>水平线</h6>
                    <dl>
                        <dt id="line_verticalorientation">垂直</dt>
                        <dd>
                            <p>如果设置，将作为垂直线。</p>
                        </dd>
                        <dt id="line_userandomvectorinstead">使用随机角度</dt>
                        <dd>
                            <p>如果设置，粒子将在随机方向生成。此属性会覆盖<property query="line_vectorangle">粒子角度</property>。</p>
                        </dd>
                        <dt id="line_vectorangle">粒子角度</dt>
                        <dd>
                            <p>指定生成粒子时的方向，以度为单位。</p>
                        </dd>
                        <dt id="line_vectoranglez">Z轴粒子角度</dt>
                        <dd>
                            <p>指定生成粒子时的Z轴方向。此值与<property query="line_vectorangle">粒子角度</property>结合使用以创建3D向量。用于3D粒子效果。
                            </p>
                        </dd>
                    </dl>
                </div>
                <!--2-->
                <!--2-->
                <div class="pborder">
                    <h6>矩形</h6>
                    <dl>
                        <dt id="rect_vectorrelativetocenter">相对于中心的粒子</dt>
                        <dd>
                            <p>如果设置，粒子将从中心向外生成。适用于2D粒子效果。此属性会覆盖<property query="rect_userandomvectorinstead">使用随机角度
                                </property>和<property query="rect_vectorangle">粒子角度
                                </property>。</p>
                        </dd>
                        <dt id="rect_userandomvectorinstead">使用随机角度</dt>
                        <dd>
                            <p>如果设置，粒子将在随机方向生成。此属性会覆盖<property query="rect_vectorangle">粒子角度</property>。</p>
                        </dd>
                        <dt id="rect_vectorangle">粒子角度</dt>
                        <dd>
                            <p>指定生成粒子时的方向，以度为单位。</p>
                        </dd>
                        <dt id="rect_vectoranglez">Z轴粒子角度</dt>
                        <dd>
                            <p>指定生成粒子时的Z轴方向。此值与<property query="rect_vectorangle">粒子角度</property>结合使用以创建3D向量。用于3D粒子效果。
                            </p>
                        </dd>
                    </dl>
                </div>
                <!--2-->
            </dd>
            <dt id="forcefield">力场</dt>
            <dd>
                <p>影响粒子运动的力场。</p>
            </dd>

            <hr>

            <dt id="customimage">自定义图像</dt>
            <dd>
                <p>用于粒子的图像。</p>
            </dd>
            <dt id="particlescale">粒子缩放</dt>
            <dd>
                <p>粒子的基本缩放。缩放也受<property query="startsize">起始大小</property>、<property query="fadeinsize">淡入大小
                    </property>、<property query="endsize">结束大小</property>、<property query="endsizerandom">结束大小随机量
                    </property>影响。</p>
            </dd>
            <dt id="traillength">拖尾长度</dt>
            <dd>
                <p>根据其速度拉伸粒子。用于模拟运动模糊。</p>
            </dd>
            <dt id="colorfrom">起始颜色</dt>
            <dt id="colorto">结束颜色</dt>
            <dd>
                <p>当生成粒子时，粒子颜色会在<property query="colorfrom">起始颜色</property>和
                    <property query="colorto">结束颜色</property>之间随机混合。</p>
            </dd>
            <dt id="fadeinandouttime">淡入淡出时间</dt>
            <dd>
                <p>在开始淡入和结束淡出阶段之间的时间。粒子大小的变化有3个阶段：<property query="startsize">起始大小</property> 到 <property
                        query="fadeinsize">淡入大小</property> 到 <property query="endsize">结束大小</property>。</p>
            </dd>
            <dt id="velocityangle">角度对齐运动方向</dt>
            <dd>
                <p>如果设置，粒子将与其移动方向对齐。</p>
            </dd>
            <dt id="sizeaspectratio">纵横比</dt>
            <dd>
                <p>对于正方形粒子，请设置为<value>1.0</value>，对于长宽不等的粒子，请设置其他值。</p>
            </dd>
            <dt id="startsize">起始大小</dt>
            <dd>
                <p>粒子在生成时的大小。</p>
            </dd>
            <dt id="fadeinsize">淡入大小</dt>
            <dd>
                <p>淡入时的粒子大小。在<property query="fadeinandouttime">淡入淡出时间</property>指定的时间之后发生。</p>
            </dd>
            <dt id="endsize">结束大小</dt>
            <dd>
                <p>粒子在寿命结束时的大小。</p>
            </dd>
            <dt id="endsizerandom">结束大小随机量</dt>
            <dd>
                <p>向大小值添加随机成分。此值会添加到<property query="startsize">起始大小
                    </property>、<property query="fadeinsize">淡入大小</property> 和 <property query="endsize">结束大小
                    </property>。</p>
            </dd>
            <dt id="endsizezfactor">透视感[弃用]</dt>
            <dd>
                <p>使粒子的大小与其深度相关。这是绝对属性，意义尚不明确。<br>对于3D粒子，使用<property query="perspectivedepth">透视深度</property>和<property query="perspectivefov">透视角度</property>。</p>
            </dd>
            <dt id="nearcamerafadeoutdistance">近摄像机淡出距离</dt>
            <dd>
                <p>当接近摄像机时，以一定距离淡出粒子。用于3D粒子效果。</p>
            </dd>

            <hr>


            <dt id="spawntime">生成时间</dt>
            <dd>
                <p>每个新粒子生成之间的时间。较低的值将生成更多粒子。</p>
            </dd>
            <div class="pborder">
                <div class="tip">粒子总速度由以下部分组成：<br>
                    <property query="measureoverallspeed">速度动画</property>+<property query="speed">基础速度
                    </property>+<property query="speedrandom">随机速度</property>。
                </div>
                <dt id="measureoverallspeed">速度动画</dt>
                <dd>
                    <p>粒子速度的变化量。</p>
                </dd>
                <dt id="speed">基础速度</dt>
                <dd>
                    <p>粒子速度的整体偏移。</p>
                </dd>
                <dt id="speedrandom">随机速度</dt>
                <dd>
                    <p>粒子速度的随机分量。</p>
                </dd>
            </div>
            <dt id="lifetime">生命</dt>
            <dd>
            <p>粒子生成后存在的总时间(秒)。</p>
            </dd>
            <dt id="gravity">重力</dt>
            <dd>
                <p>定义影响粒子运动的重力力量。</p>
            </dd>

            <!-- <h5>Wave Behaviour</h5> -->
            <hr>

            <dt id="sidesinewavefreq">波形频率</dt>
            <dd>
            <p>波动运动的速度/频率。</p>
            </dd>
            <dt id="sidesinewavefreqrandom">波形频率随机量</dt>
            <dd>
            <p>波动运动速度/频率的随机量。</p>
            </dd>
            <dt id="sidesinewavemag">波形幅度</dt>
            <dd>
                <div class="tip">如果设置了<property query="sidesinewavemag">波形幅度</property>，粒子将来回摆动/振荡到两侧。</div>
                <p>波动运动的幅度。</p>
            </dd>
            <dt id="sidesinewavemagrandom">波形幅度随机度</dt>
            <dd>
            <p>波动运动幅度的随机量。</p>
            </dd>
        </dl>
        <!---->
    </div>


    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
</html>